<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/Write_book.css">
    <script charset="utf-8" src="../static/js/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="../static/js/kindeditor/lang/zh-CN.js"></script>
    <script src="/static/jquery.min.js"></script>
    <style type="text/css">
        #disappare {
            border: 3px solid #ccc;
            border-radius: 5px;
            background: #fff;
            font-size: 15px;
            width: 300px;
            height: 60px;
            position: fixed;
            z-index: 9999;
            top: 50%;
            left: 50%;
            margin: -125px 0 0 -150px;
            text-align: center;
            color:red;
            line-height: 60px;
        }

        #disappare p {
            padding: 5px;
            font-size: 16px;
            color: red;
            text-align: center;
        }
        #disappare1 {
            border: 3px solid #ccc;
            border-radius: 5px;
            background: #fff;
            font-size: 15px;
            width: 300px;
            height: 60px;
            position: fixed;
            z-index: 9999;
            top: 50%;
            left: 50%;
            margin: -125px 0 0 -150px;
            text-align: center;
            color:red;
        }

        #disappare1 p {
            padding: 5px;
            font-size: 16px;
            color: red;
            text-align: center;
        }
        #ert {
            display: none;
        }

    </style>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '1000',
                height: '300',
                resizeType: '0',
                newlineTag: "br",
                uploadJson: "/kuyue/img/",
                items: ["fontname", "fontsize", "forecolor", "bold", "italic", "underline", "lineheight", "source", "redo", "undo", "indent", "outdent"],
            });
        });


        $(function () {
            $("#imageInput").change(function () {
                var $file = $(this);
                var objUrl = $file[0].files[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL = windowURL.createObjectURL(objUrl);

                function blobToImage(blob, cb) {
                    fileOrBlobToDataURL(blob, function (dataurl) {
                        var img = new Image();
                        img.src = dataurl;
                        alert(img.src)
                        cb(img);
                    });
                }

                $("#imageview").attr("src", dataURL);
            });
        });


        $(document).ready(function (){
            $("#form1").bind("submit", function () {
                var txt_firstname = $.trim($("#name1").val());
                var txt_lastname = editor.html();
                if (txt_firstname == "") {
                    $("#firstnameLabel").text("名称不能为空！");
                    $("#firstnameLabel").css({"color": "red"});
                    return false
                }
                else {
                    $("#firstnameLabel").text("")
                }
                if (editor.html().length == 0) {
                    $("#firstnameLabe2").text("简介不能为空！");
                    $("#firstnameLabe2").css({"color": "red"});
                    return false
                }
                else {
                    $("#firstnameLabe2").text("")
                }
            })
        })

         $(document).ready(function () {
             dv = $("#ert").text().trim()
              $("#tijiao").click(function(){
                 $("#disappare1").show().delay(1000).hide(100);
            })
             console.log(dv)
             if (dv != '') {

                 show = dv
                 $("#disappare").html(show);
                 $("#disappare").show().delay(3000).hide(300);
                 dv = ''

             }
         })

    </script>
</head>
<body>
<div class="container">
    <div id="ert">
        {{ bag }}
    </div>
    <header>
        <iframe src="/Header/" width="1200px" FrameBorder="0" height="135px"></iframe>
    </header>
     <div id="disappare" style="display: none;">
            <p>请先登录！！！</p>
        </div>
     <div id="disappare1" style="display: none;">
            <p>审核中，请稍候！！！</p>
        </div>
    <div id="content">
        <div style="margin:50px;display: flex">
            <form action="/Write_book/" id="form1" method="post" enctype="multipart/form-data">
                <div style="display: flex;">
                    <div class="div1" style="width: 180px">
                        <div style="margin-bottom: 10px;width:180px "><img src="../static/image/59886s.jpg"
                                                                           id="imageview" width="180px" height="230px"/>
                        </div>
                        <input width="600" id="imageInput" name="img" type="file"/>
                    </div>
                    <div class="div1" style="margin-top: 30px;margin-left: 25px">
                        <span class="font_1" style="font-size: 20px">小说名字：</span>
                        <p></p>
                        <input style="width: 500px;height: 30px" name="name" id="name1" type="text" value="{{ name }}"/>
                        <label id="firstnameLabel"></label>
                        <p></p>
                        <span class="font_1" style="font-size: 20px">小说类别：</span>
                        <p></p>
                        <select name="kind" style="width: 505px;height: 42px">
                            <option value="1" selected="selected">玄幻</option>
                            <option value="2">仙侠</option>
                            <option value="3">都市</option>
                            <option value="4">历史</option>
                            <option value="5">游戏</option>
                            <option value="6">科幻</option>
                            <option value="7">奇幻</option>
                            <option value="8">现实</option>
                            <option value="9">军事</option>
                            <option value="10">二次元</option>
                            <option value="11">武侠</option>
                            <option value="12">体育</option>
                            <option value="13">灵异</option>
                        </select>
                    </div>
                </div>
                <br>
                <img src="../static/image/line.png" width="1000">
                <div class="div1" style="margin-top: 30px">
                    <span class="font_1">小说简介：</span>
                    <p></p>
                    <div><textarea id="editor_id" name="content">{{ text }}</textarea></div>
                    <label id="firstnameLabe2"></label>

                </div>
                <div style="margin-top: 20px;width: 50px"><input id="tijiao" style="width: 80px;height: 30px"
                                                                 type="submit" value="提交"></div>
            </form>
        </div>
    </div>
</div>

</body>
</html>